<template>
	<!-- 车辆轨迹查询 -->
	<div class="content">
		<div class="content-top">
			车辆管理_车辆信息查询
		</div>
		<!-- <div class="content-operation">
			<el-button type="primary" icon="el-icon-plus" @click='is_add = true' v-if="has_add">添加车辆</el-button>
		</div> -->
		<div class="car-search" v-if="!is_gps_history">
			<el-form :inline="true" class="demo-form-inline">
				<div>
					<el-form-item style="margin: 10px 28px!important;" label="车牌">
						<el-input style="width: 260px;" v-model="chepai" placeholder="车牌"></el-input>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="车主姓名">
						<el-input style="width: 260px;" v-model="xingming" placeholder="车主姓名"></el-input>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="状态">
						<el-select v-model="zhuangtai" placeholder="请选择">
							<el-option v-for="item in dict.status" :key="item.value" :label="item.label" :value="item.type">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item style="margin: 10px 0px!important;">
						<el-button type="primary" icon="el-icon-search">搜索</el-button>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;" @click="get_more" icon="el-icon-caret-bottom"></el-button>
					</el-form-item>
				</div>
				<div v-if="is_more">
					<el-form-item style="margin: 10px 28px!important;" label="企业名称">
						<el-input style="width: 260px;" placeholder="企业名称"></el-input>
					</el-form-item>
					<el-form-item style="margin: 10px 28px!important;" label="企业名称">
						<el-input style="width: 260px;" placeholder="企业名称"></el-input>
					</el-form-item>
				</div>

			</el-form>
		</div>
		<div class="car-search" v-if="is_gps_history">
			<el-form :inline="true" class="demo-form-inline">
				<div class='gps'>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;padding: 12px 10px;">车牌号：{{gps_info.licensePlateNumber}}</el-button>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;padding: 12px 10px;">车架号：{{gps_info.vin}}</el-button>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;padding: 12px 10px;">型号：{{gps_info.model}}</el-button>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;padding: 12px 10px;">车主姓名：{{gps_info.ownerName}}</el-button>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;padding: 12px 10px;">联系方式：{{gps_info.ownerPhoneNum}}</el-button>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;padding: 12px 10px;">车牌类型：{{gps_info.ownerPhoneNum}}</el-button>
					</el-form-item>
					<el-form-item style="margin: 10px 0px!important;">
						<el-button style="border: none;padding: 12px 10px;">使用性质：<template v-if="gps_info.property == item.value" v-for="item in dict.property">{{item.type}}
							</template></el-button>
					</el-form-item>

					<el-form-item style="margin: 10px 0px!important;">
						<el-button type="primary" @click='show_back()'>返回</el-button>
					</el-form-item>

				</div>
			</el-form>
		</div>

		<div style="height: 300px;margin: 0 20px 20px 20px;border: 1px solid #B8BECC;" id="container"></div>
		<div class="content-table content-table2" v-if="!is_gps_history">
			<el-table :data="tableData" @sort-change="orderList" show-header stripe style="width: 100%;">
				<el-table-column prop="vin" label="车架号" width="200">
				</el-table-column>
				<el-table-column prop="licensePlateNumber" label="车牌号" width="200">
				</el-table-column>

				<el-table-column prop="driverName" label="当前司机" width="200">
				</el-table-column>
				<el-table-column prop="mileage" label="累计里程" width="200">
				</el-table-column>
				<el-table-column prop="speed" label="当前车辆时速" width="200">
				</el-table-column>
				<el-table-column prop="fuelConsumptionRate" label="电池消耗率" width="200">
				</el-table-column>
				<el-table-column prop="batteryCode" label="车载电池编号" width="200">
				</el-table-column>

				<el-table-column label="查看">
					<template slot-scope="scope">
						<template v-if='has_edit'>
							<el-button @click="handleClick(scope.row,1)" type="text" size="small">查看详情</el-button>
						</template>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-table content-table2" v-if="is_gps_history">
			<el-table :data="gps_tableData" @sort-change="orderList" show-header stripe style="width: 100%;">
				<el-table-column prop="licensePlateNumber" label="车牌号" width="230">
				</el-table-column>

				<el-table-column prop="speed" label="速度(km/s)" width="230">
				</el-table-column>
				<el-table-column prop="fuelConsumptionRate" label="能耗(kg标油/t)" width="230">
				</el-table-column>
				<el-table-column prop="longitude" label="当前经度" width="250">
				</el-table-column>
				<el-table-column prop="latitude" label="当前纬度" width="250">
				</el-table-column>
				<el-table-column prop="batteryCode" label="电池包编号" width="250">
				</el-table-column>
				<el-table-column prop="soc" label="剩余电量(W)" width="200">
				</el-table-column>
				<el-table-column prop="driverName" label="司机姓名">
				</el-table-column>
			</el-table>
		</div>
		<div class="content-page" v-if="!is_gps_history">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
			 :page-size=limit layout="prev, pager, next, jumper" :total=total>
			</el-pagination>
		</div>
		<template v-if="is_add">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CarAdd @saveAdd='saveAdd'></CarAdd>
			</div>
		</template>
		<template v-if="is_edit">
			<div class="all-screen"></div>
			<div class='add-box'>
				<CarEdit @saveEdit='saveEdit' :flag='flag' :id='id' :status='status'></CarEdit>
			</div>
		</template>
		<template v-if="is_history">
			<div class="all-screen"></div>
			<div class='history-box'>
				<CarHistory @saveHistory='saveHistory' :flag='flag' :id='id' :status='status'></CarHistory>
			</div>
		</template>
	</div>
</template>

<script>
	import CarAdd from '@/components/car/CarAdd.vue'
	import CarEdit from '@/components/car/CarEdit.vue'
	import CarHistory from '@/components/car/CarHistory.vue'
	import Global from '@/components/Global.vue'
	export default {
		components: {
			CarAdd: CarAdd,
			CarEdit: CarEdit,
			CarHistory: CarHistory,
		},
		props: ['power'],
		data() {
			return {
				flag: 0,
				id: 'id',
				status: '',
				is_add: false,
				is_edit: false,
				is_history: false,
				is_gps_history: false,
				chepai: '',
				xingming: "",
				zhuangtai: '',
				tableData: [],
				limit: 10,
				page: 1,
				total: 1,
				gps_limit: 10,
				gps_page: 1,
				gps_total: 1,
				gps_info: {},
				gps_marker: '',
				infoWindow: '',
				gps_tableData: [],
				gps_list: [],
				dict: '',
				has_add: false,
				has_edit: false,
				has_del: false,
				gdmap: '',
				is_more: false,
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value2: []

			}
		},
		mounted() {
			this.init();
			this.check_power();
			console.log(this.power);

			this.get_dict();
		},
		methods: {
			show_back() {
				clearInterval(window.getGpsInterval);
				this.gps_tableData = [];
				this.gps_list = [];
				this.is_gps_history = false;
				this.show_point(this.tableData);
			},
			show_point(list) {
				var self = this;
				var len = list.length;
				this.gdmap.clearMap();
				for (var i = 0; i < len; i++) {
					if (list[i] == null) continue;
					// 创建一个 icon
					var endIcon = new AMap.Icon({
						size: new AMap.Size(41, 61),
						image: require('@/assets/img/icon_car_bule.png'),
						imageSize: new AMap.Size(41, 61),
						// imageOffset: new AMap.Pixel(10, 10)
					});
					var marker = new AMap.Marker({
						position: new AMap.LngLat(list[i].longitude, list[i].latitude),
						icon: endIcon,
						offset: new AMap.Pixel(-20, -59) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
					});
					// marker.setLabel({
					// 	offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
					// 	content: "<div class='info'>" + list[i].name + "</div>", //设置文本标注内容
					// 	direction: 'top' //设置文本标注方位
					// });
					// var longtitude = list[i].longtitude;
					// var latitude = list[i].latitude;
					// var name = list[i].name;

					// AMap.event.addListener(marker, 'click', function(e) {
					// 	self.$router.push({
					// 		path: '/MapDriver',
					// 		query: {
					// 			position: longtitude + ',' + latitude,
					// 			name: name
					// 		}
					// 	});
					// });
					this.gdmap.add(marker);
				}
			},
			get_more() {
				this.is_more = !this.is_more;
			},
			init() {
				var self = this;
				var map = new AMap.Map('container', {
					zoom: 11, //级别
					center: [120.69889, 27.993148], //中心点坐标
				});
				this.gdmap = map;
				this.get_list();
			},
			orderList(column, prop, order) {
				console.log(column);
			},
			check_power() {
				var self = this;
				this.power.forEach(function(element) {
					if (element.permissionName.indexOf("入库") != -1) self.has_add = true;
					if (element.permissionName.indexOf("编辑") != -1) self.has_edit = true;
					if (element.permissionName.indexOf("删除") != -1) self.has_del = true;
				});
			},
			get_dict() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'admin/dict/findDict?keyword=vehicle')
					.then(function(res) {
						if (res != '')
							self.dict = res.data;
						console.log(self.dict);
					})
			},
			get_list() {
				var self = this;
				this.$axios.post(this.$global.serverIp + 'vehicleExec/vehicleStatistics/findRealTimeRoute', {
						"limit": self.limit + "",
						"page": self.page + ""
					})
					.then(function(res) {
						console.log(res);
						if (res != '') {
							self.tableData = res.data.list;
							self.total = res.data.totalCount;
							self.page = res.data.reqPage;
							self.show_point(self.tableData);
						}

					})

			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.get_list();
				console.log(`当前页: ${val}`);
			},
			gps_handleCurrentChange(val) {
				this.gps_page = val;
				this.get_gps();
			},
			saveAdd(type) {
				if (type == 2) {
					this.get_list();
				}
				this.is_add = false;
			},

			saveHistory() {
				this.is_history = false;
			},
			saveEdit(type) {
				if (type == 2) {
					this.get_list();
				} else if (type == 3) {
					this.is_history = true;
				} else if (type == 4) {
					this.gdmap.clearMap();
					this.get_info();
					this.is_gps_history = true;
				}
				this.is_edit = false;
			},
			editCompany() {
				this.is_edit = true;
			},
			handleClick(row, flag) {
				console.log(row.id);
				this.id = row.vehicleId;
				this.flag = flag;
				this.status = row.status;
				this.is_edit = true;

			},
			get_info() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'vehicle/vehicle/info/' + this.id)
					.then(function(res) {
						if (res != '') {
							self.gps_info = res.data.sysflow.object;
							console.log(self.gps_info);
							self.get_gps();
							window.getGpsInterval = setInterval(self.get_gps, 5000);
						}
					})

			},
			get_gps() {
				var self = this;
				this.$axios.get(this.$global.serverIp + 'vehicleExec/vehicleStatistics/findRealTimeRoute/' + self.id)
					.then(function(res) {
						// console.log(res);
						if (res != '') {

							self.gps_tableData.push(res.data);
							// 	self.gps_total = res.data.totalCount;
							// 	self.pgs_page = res.data.reqPage;
							self.show_gps_point(res.data);
						}

					})
			},
			show_gps_point(info) {
				var self = this;
				console.log(info);
				if (self.gps_tableData.length == 1) {
					self.gps_list[0] = [info.longitude, info.latitude];
					self.gps_list[1] = [info.longitude, info.latitude];
					var lineArr = [
						[info.longitude, info.latitude]
					];
					self.gps_marker = new AMap.Marker({
						map: self.gdmap,
						position: [info.longitude, info.latitude],
						icon: "https://webapi.amap.com/images/car.png",
						offset: new AMap.Pixel(-26, -13),
						autoRotation: true,
						angle: -90,
					});
					// 绘制轨迹
					var polyline = new AMap.Polyline({
						map: self.gdmap,
						path: lineArr,
						showDir: true,
						strokeColor: "#28F", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6, //线宽
						// strokeStyle: "solid"  //线样式
					});

					var passedPolyline = new AMap.Polyline({
						map: self.gdmap,
						// path: lineArr,
						strokeColor: "#AF5", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6, //线宽
						// strokeStyle: "solid"  //线样式
					});


					self.gps_marker.on('moving', function(e) {
						passedPolyline.setPath(e.passedPath);
					});

					self.gdmap.setFitView();
				} else {
					self.gps_list[0] = self.gps_list[1];
					self.gps_list[1] = [info.longitude, info.latitude];
					var line = [];
					line.push(self.gps_list[0]);
					line.push(self.gps_list[1]);
					var polyline = new AMap.Polyline({
						map: self.gdmap,
						path: line,
						showDir: true,
						strokeColor: "#28F", //线颜色
						// strokeOpacity: 1,     //线透明度
						strokeWeight: 6, //线宽
						// strokeStyle: "solid"  //线样式
					});
					// var interval = setInterval("getPoint()",5000);
					self.gps_marker.moveAlong(line, 200);
					self.gdmap.setFitView();
				}

				var mk = new AMap.Marker({
					position: [info.longitude, info.latitude]
					// map: self.gdmap
				});
				self.infoWindow = new AMap.InfoWindow({
					offset: new AMap.Pixel(0, -30),
					size: new AMap.Size(150, 100),
				});
				mk.content = '我是第个Marker';

				mk.content = "<br>速度：" + info.speed + " km/s<br>能耗率：" + info.fuelConsumptionRate + " (kg标油/t)<br>剩余电量：" + info.soc +
					' W';

				mk.on('click', self.markerClick);
				mk.emit('click', {
					target: mk
				});





				// return;
				// var self = this;
				// var len = list.length;
				// this.gdmap.clearMap();
				// var polylinePath = [];
				// for (var i = 0; i < len; i++) {

				// 	// 创建一个 icon
				// 	var endIcon = new AMap.Icon({
				// 		size: new AMap.Size(76, 36),
				// 		image: require('@/assets/img/car_real.png'),
				// 		imageSize: new AMap.Size(76, 36),
				// 		// imageOffset: new AMap.Pixel(10, 10)
				// 	});
				// 	var marker = new AMap.Marker({
				// 		position: new AMap.LngLat(list[i].longitude, list[i].latitude),
				// 		icon: endIcon,
				// 		offset: new AMap.Pixel(-30, -15) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				// 	});

				// 	polylinePath.push(new AMap.LngLat(list[i].longitude, list[i].latitude));

				// 	this.gdmap.add(marker);
				// }
				// // 创建线覆盖物
				// var polyline = new AMap.Polyline({
				// 	path: polylinePath
				// });
				// this.gdmap.add(polyline);
			},
			markerClick(e) {

				this.infoWindow.setContent(e.target.content);
				this.infoWindow.open(this.gdmap, e.target.getPosition());
			},
			beforeDestory() {
				clearInterval(window.getGpsInterval);
			},
			destoryed() {
				clearInterval(window.getGpsInterval);
			}
		},


	}
	import '@/assets/css/common.css'
</script>
